¿Qué papel tienen `effectScope`, `onScopeDispose` y la limpieza de efectos en composables complejos?

Respuesta

• effectScope permite agrupar watchers, computeds y efectos relacionados para detenerlos de una sola vez cuando una composición deja de tener sentido.
• onScopeDispose es la pieza adecuada para cerrar sockets, timers, observers o listeners asociados a ese alcance.
• En composables complejos, esta separación ayuda a evitar trabajo zombie cuando la vista cambia o la funcionalidad se desmonta parcialmente.

Puntos clave

• computed debe ser puro y servir para derivar; cuando introduces efectos laterales ahí, el modelo mental deja de ser fiable.
• watch y watchEffect son herramientas para sincronizar con el exterior, no para construir una cadena de estado derivado.
• En Vue conviene distinguir siempre fuente de verdad, dato derivado y efecto externo porque casi todos los bugs reactivos rompen una de esas fronteras.

Errores comunes

• Usar watchers para derivar datos que podrían salir de computed introduce sincronizaciones manuales y fallos difíciles de seguir.
• Copiar valores reactivos a variables locales sin toRefs o storeToRefs rompe la relación con la fuente de verdad.

Ejemplo de código

export function useLiveOrders() {
  const scope = effectScope();

  scope.run(() => {
    const socket = connectOrdersStream();
    onScopeDispose(() => socket.close());
  });

  return () => scope.stop();
}

Ejemplo o caso real

En una pantalla con filtros, carga remota y varios estados locales, estas decisiones afectan directamente a si la UI se mantiene estable o empieza a comportarse de forma impredecible.

Idea clave

Si separo fuente de verdad, derivación y efecto, la mayoría de problemas reactivos pierden fuerza.